const categoryList = document.querySelector('.categoryList ul')
let pageNum
const newPage =(pag='900')=>{
    return layui.use(function(){
        let laypage = layui.laypage;
        laypage.render({
            elem: 'page',
            limit:12,
            count: pag,
            curr:1,
            jump: function(obj, first){
                if(!first){
                    newType(str,0,obj.curr)
                }
            }
        });
    });
}
const score=(s,i)=>{
    layui.use(function(){
    let rate = layui.rate;
        rate.render({
            half:true,
            elem: s,
            value: i,
            readonly: true
        });
    });
}
const categoryPlay=(type='3873',attrs='0',page='1')=>{
    axios.get('https://i.qtfm.cn/capi/neo-channel-filter',{
        params:{
            category:type,
            attrs:attrs,
            curpage:page
        }
    }).then(res=>{
        res.data.data.categories.forEach(item => {
            categoryList.innerHTML+=`
                <li data-id='${item.id}' onclick='changeType(this)' >${item.name}</li>
            `
        });
        const lia = document.querySelector('.categoryList ul li')
        lia.classList.add('active')
    }).catch(err=>{
        console.log(err)
    })
}
categoryPlay()
let str=''
const main = document.querySelector('.content-main')
const newType=(type='3873',attrs='0',page='1')=>{
    return axios.get('https://i.qtfm.cn/capi/neo-channel-filter',{
        params:{
            category:type,
            attrs:attrs,
            curpage:page
        }
    }).then(res=>{
        main.innerHTML=''
        str = type
        pageNum = res.data.total
        res.data.data.channels.forEach(item => {
            const scoreId = `score${item.id}`
            main.innerHTML+=`
            <div class="item">
                <div class="img">
                    <img src="${item.cover}" alt="">
                    <div class="imgOverlay">
                        <div class="${scoreId}"></div>
                    </div>
                </div>
                <div class="link">
                    <span class="channel-type">专辑</span>
                    <span class="title">${item.title}</span>
                </div>
                <div class="intro">
                    ${item.description}
                </div>
                <div class="playCount">
                    <i class="iconfont icon-redu"></i>
                    <span>${item.clout}</span>
                </div>
            </div>
            `
            score(`.${scoreId}`,item.score/2)
        });
    }).catch(err=>{
        console.log(err)
    })
}
newPage()
const getType=(i)=>{
    return new Promise(resolve=>{
        let types = document.querySelectorAll('ul li')
        types.forEach(item=>{
            item.classList.remove('active')
        })
            i.classList.add('active')
        resolve()
    })
}
const changeType=async(i)=>{
    try{
        await getType(i)
        await newType(i.dataset.id,0,1)
        await newPage(pageNum)
    }catch(err){
        console.log(err)
    }
}
newType()